import { useRouteMeta, useIntl, FormattedMessage } from 'dumi';
import { EditOutlined } from '@ant-design/icons';
import useAdditionalThemeConfig from '../hooks/useAdditionalThemeConfig';

const EditLink = () => {
  const { frontmatter } = useRouteMeta();
  const { editLink } = useAdditionalThemeConfig();
  const intl = useIntl();

  const showEditLink = editLink && frontmatter.filename;
  return (
    showEditLink && (
      <div>
        <a
          target="_blank"
          href={`${intl.formatMessage(
            { id: '$internal.edit.link' },
            { filename: frontmatter.filename }
          )}`}
          rel="noreferrer"
        >
          <EditOutlined />
          <FormattedMessage id="app.footer.actions.edit" />
        </a>
      </div>
    )
  );
};

export default EditLink;
